---
title: "Skeleton"
description: "Skeleton is a placeholder to show a loading state and the expected shape of a component."
---

import {skeletonContent} from "@/content/components/skeleton";

# Skeleton

Skeleton is a placeholder to show a loading state and the expected shape of a component.

<ComponentLinks component="skeleton" />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add skeleton",
    npm: "npm install @heroui/skeleton",
    yarn: "yarn add @heroui/skeleton",
    pnpm: "pnpm add @heroui/skeleton",
    bun: "bun add @heroui/skeleton"
  }}
/>

## Import

<ImportTabs
  commands={{
    main: 'import {Skeleton} from "@heroui/react";',
    individual: 'import {Skeleton} from "@heroui/skeleton";',
  }}
/>

## Usage

<CodeDemo title="Usage" files={skeletonContent.usage} />

### Standalone

Skeleton takes the shape of its `children` component by default, but you can also use
it as a standalone component.

<CodeDemo title="Standalone" files={skeletonContent.standalone} />

### Loaded State

You can use the `isLoaded` prop to stop the skeleton animation and show the children component.

<CodeDemo title="Loaded State" files={skeletonContent.loaded} />

## Slots

- **base**: The base slot of the skeleton, it contains the `before` and `after` pseudo elements to create the animation.
- **content**: The wrapped component to show the skeleton shape. It is visible only when the `isLoaded` prop is `true`.

<Spacer y={4}/>  

## Data Attributes

`Skeleton` has the following attributes on the `base` element:

- **data-loaded**:
  Indicates the loaded state of the skeleton. Based on the `isLoaded` prop.

<Spacer y={4}/>  

## API

### Skeleton Props

<APITable
  data={[
    {
      attribute: "children",
      type: "ReactNode",
      description: "The content of the skeleton.",
      default: "-"
    },
    {
      attribute: "isLoaded", 
      type: "boolean",
      description: "Whether the skeleton is loaded.",
      default: "false"
    },
    {
      attribute: "disableAnimation",
      type: "boolean", 
      description: "Whether to disable the animations.",
      default: "false"
    },
    {
      attribute: "classNames",
      type: "Partial<Record<\"base\" | \"content\", string>>",
      description: "Allows to set custom class names for the skeleton slots.",
      default: "-"
    }
  ]}
/>
